<template>
	<view class="page">
		<!-- 内容 -->
		<view class="content">
			<view class="title">
				负责人信息
			</view>
			<view class="prompt">
				上传身份证照片，更新负责人信息
			</view>
			<view style="display: flex; justify-content: space-between; padding: 20rpx;">
				<upload-image size="small" type="front" @uploaded="uploadedCardFront" :defaultList="formData.adminCardFront"></upload-image>
				<upload-image size="small" type="back" @uploaded="uploadedCardBack" :defaultList="formData.adminCardBack"></upload-image>
			</view>
			<view class="fui-wrap">
				<fui-form ref="FormRef" top="0" :model="formData">
					<fui-form-item label="姓名" labelWeight="600" labelWidth="200" :left="0" labelSize="28" prop="name">
						<fui-input :borderBottom="false" color="#333333" size="28" :padding="[0]" placeholder="请输入负责人姓名"
							v-model="formData.name"></fui-input>
					</fui-form-item>
					<fui-form-item label="身份证号" labelWeight="600" labelWidth="200" :left="0" labelSize="28"
						prop="idcode">
						<fui-input :borderBottom="false" color="#333333" size="28" :padding="[0]"
							placeholder="请输入负责人身份证号" v-model="formData.idcode"></fui-input>
					</fui-form-item>
					<!-- <fui-form-item label="手机号码" labelWeight="600" :left="0" labelWidth="200" labelSize="28"
						prop="phone">
						<fui-input :borderBottom="false" color="#333333" size="28" :padding="[0]"
							placeholder="请输入负责人联系方式" v-model="formData.phone"></fui-input>
					</fui-form-item>
					<fui-form-item label="登录密码" labelWeight="600" :left="0" labelWidth="200" labelSize="28"
						prop="password">
						<fui-input :borderBottom="false" color="#333333" size="28" :password="true" :padding="[0]"
							placeholder="请输入登录密码" v-model="formData.password"></fui-input>
					</fui-form-item> -->
				</fui-form>
			</view>
			<!-- 底部按钮 -->
			<view class="btn">
				<fui-button :disabled="false" disabledBackground="#DFDFDF" borderColor="var(--fui-color-primary)" width="312rpx"
					height="78rpx" background="#FFFFFF" @click="cancellation" color="var(--fui-color-primary)">取消</fui-button>
				<fui-button :disabled="false" width="312rpx" height="78rpx" disabledBackground="#DFDFDF"
					background="var(--fui-color-primary)" @click="submit">提交更新</fui-button>
			</view>

		</view>

	</view>
</template>

<script setup>
	import uploadImage from '@/components/upload/image'
	import {
		ref,
		inject,
		computed
	} from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import staffApi from '@/api/staff.js'
	import SystemApi from '@/api/system'
	import { useStore } from 'vuex';
	const store = useStore();
	const modal = inject('$modal')
	const FormRef = ref(null)
	const rules = ref([{
		name: "name",
		rule: ["required"],
		msg: ["请输入法人姓名"]
	}, {
		name: "idcode",
		rule: ["required", "isIdCard"],
		msg: ["请输入法人身份证号", "请输入正常法人身份证号"]
	}, 
	// {
	// 	name: "phone",
	// 	rule: ["required", "isMobile"],
	// 	msg: ["请输入法人联系方式", "请输入正确的手机号码"]
	// }, 
	// {
	// 	name: "password",
	// 	rule: ["required", 'isEnAndNo'],
	// 	msg: ["请输入密码", "请输入包含英文和数字组合 4~20 位"]
	// }
	])
	const formData = ref({
		name: '',
		idcode: '',
		// phone: '',
		// password: '',
		adminCardFront:[],
		adminCardBack:[],
		idcFront:'',
		idcBack:'',
		id:''
	})
	// 身份证正面上传
	const uploadedCardFront = async (e) => {
		if (e[0]) {
			const res = await SystemApi.uploadidcard({
				imageUrl: e[0]
			})
			formData.value.idcFront = e[0]
			if (res.code == 0) {
				let obj = JSON.parse(res.data)
				formData.value.name = obj['姓名']
				formData.value.idcode = obj['公民身份号码']
			}
		}
	}
	// 身份证反面上传
	const uploadedCardBack = (e) => {
		formData.value.idcBack = e[0]
		console.log('uploadedCardBack', e)
	}
	onLoad((option)=>{
		let obj = JSON.parse(decodeURIComponent(option.data))
		formData.value.name = obj.headName
		formData.value.idcode = obj.headID
		formData.value.idcFront = obj.adminCardFront
		formData.value.idcBack = obj.adminCardBack
		formData.value.adminPhone = obj.headPhone
		formData.value.adminCardFront.push(obj.adminCardFront)
		formData.value.adminCardBack.push(obj.adminCardBack)
		formData.value.id = obj.adminId
	})
	
	const listApiUrl = computed(() => {
		let apiUrl = ''
		if (store.getters.userType == '1') apiUrl = 'editStaff' // 供应链提交
		if (store.getters.userType == '2') apiUrl = 'editsupplier' // 供应商提交
		return apiUrl
	})
	// 提交
	const submit = (async () => {
		const submitform = {
			adminName:formData.value.name,
			adminPhone:formData.value.adminPhone,
			adminIdCard:formData.value.idcode,
			adminCardBack:formData.value.idcBack,
			adminCardFront:formData.value.idcFront,
			id:formData.value.id
		}
		if (!submitform.adminCardFront) {
			modal.msgError('请上传负责人身份证正面照片！')
			return
		}
		if (!submitform.adminCardBack) {
			modal.msgError('请上传负责人身份证反面照片！')
			return
		}
		const validRes = await FormRef.value.validator(formData.value, rules.value)
		if (validRes.isPassed) {
			const res = await staffApi[listApiUrl.value](submitform)
			console.log(res);
			if(res.code == 0){
				store.dispatch('GetUserInfo')
				modal.alert('更新成功')
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1000)
			}
		}
	})
	//取消
	const cancellation = (() => {
		uni.navigateBack({
			delta: 1
		})
	})
</script>

<style lang="scss" scoped>
	.content {
		margin: 36rpx;

		.title {
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.prompt {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 20rpx;
		}

		::v-deep.fui-form__wrap-inner {
			padding: 0 !important;
		}

		// ::v-deep.fui-input__self {
		// 	font-weight: bold;
		// }
		::v-deep.uni-input-input {
			font-weight: bold;
		}
		.btn {
			padding-bottom: 118rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 132rpx;
		}

		::v-deep.uni-textarea-textarea {
			font-weight: bold;
		}

		::v-deep.textarea-box .fui-form__wrap-inner {
			display: initial !important;
		}


	}
</style>